<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实时加载进度条</title>
    <style>
        .loading {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 100;
            background-color: yellow;
            width: 100%;
            height: 100%;
        }

        .load {
            width: 100px;
            height: 100px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -50px;
            border: 1px solid red;
        }

        .load span {
            display: block;
            width: 80px;
            height: 80px;
            position: absolute;
            top: 10px;
            left: 10px;
            border-radius: 50%;
            box-shadow: 0 3px 0 #666;
            animation: rotate 1s infinite linear;
        }

        @keyframes rotate {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

    </style>
    <script src="jquery-1.11.3.js"></script>
    <script>
        $(function () {
            var img = $("img");
            var num = 0;
            img.each(function (i) {
                var oImg = new Image();
                oImg.onload = function () {
                    oImg.onload = null;
                    num++;
                    console.log($('.loading b').html(parseInt(num / $("img").size() * 100) + "%"));
                    if (num >= i) {
                        $('.loading').fadeOut()
                    }
                }
                oImg.src = img[i].src

            })
        })
    </script>
</head>
<body>
<div class="loading" id="loading">
    <div class="load">
        <span></span>
        <b>%</b>
    </div>
</div>
<img src="http://pic1.win4000.com/wallpaper/2018-02-26/5a93d016b1f3e.jpg" alt="">
<img src="http://pic1.win4000.com/wallpaper/2018-02-26/5a93d017d6dff.jpg" alt="">
<img src="http://pic1.win4000.com/wallpaper/2018-02-26/5a93d0188e9b7.jpg" alt="">
<img src="http://pic1.win4000.com/wallpaper/2018-02-26/5a93d01940317.jpg" alt="">

</body>
</html>